<template>
  <div style="height: 99.9%">
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="DetailsMain">
      <div class="header">
        <!-- 
              ( value: 1， info:"待审核")
              ( value: 2， info:"审核通过")，
              ( value: 3， info:"审核不通过"); -->
        <div class="stateBox" v-if="data.certStatus == 1">
          <div class="circle">
            <i class="iconfontcolor icon-dairenzheng iconState"></i>
          </div>
          <div class="titleBox">
            <div class="title">待认证</div>
            <div class="text">
              认证类型：司机认证<span style="color: #1890ff"
                >（司机认证通过，与该司机绑定的车辆认证一并通过）</span
              >
            </div>
          </div>
        </div>
        <div class="stateBox" v-if="data.certStatus == 3">
          <div class="circle">
            <i class="iconfontcolor icon-butongguo iconState"></i>
          </div>
          <div class="titleBox">
            <div class="title">不通过</div>
            <div class="text">
              认证类型：司机认证<span style="color: #1890ff"
                >（司机认证通过，与该司机绑定的车辆认证一并通过）</span
              >
            </div>
          </div>
        </div>

        <div class="button_group" v-if="data.certStatus == 1">
          <button class="notAdopt_btn" @click="openMessageBox(false)">
            不通过
          </button>
          <button class="adopt_btn" @click="openMessageBox(true)">通过</button>
        </div>
      </div>
      <!-- 司机信息 -->
      <div class="carInfoBox">
        <div class="head">
          <i class="iconfontcolor icon-xinxi"></i>
          <h3>司机信息</h3>
        </div>
        <!-- 信息描述 -->
        <div class="formBox">
          <el-descriptions
            class="descriptions"
            :border="true"
            size="small"
            :labelStyle="{
              color: '#262626',
              fontSize: '12px',
              fontWeight: 'bold',
              backgroundColor: '#DDDDDD',
            }"
          >
            <el-descriptions-item labelClassName="label" label="司机编号">{{
              data.driverId
            }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{
              data.driverName
            }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{
              data.idCard
            }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{
              data.age
            }}</el-descriptions-item>
            <el-descriptions-item label="准驾车型">{{
              data.licenseLevel.message
            }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{
              data.phoneNumber
            }}</el-descriptions-item>

            <el-descriptions-item label="图片资料" :span="3">
              <div class="picBox">
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.driverPhoto"
                    :preview-src-list="[data.driverPhoto]"
                  >
                  </el-image>
                  <span>司机照片</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.idCardFront"
                    :preview-src-list="[data.idCardFront]"
                  >
                  </el-image>
                  <span>身份证正面照</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.idCardBack"
                    :preview-src-list="[data.idCardBack]"
                  >
                  </el-image>
                  <span>身份证背面照</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.licensePhoto"
                    :preview-src-list="[data.licensePhoto]"
                  >
                  </el-image>
                  <span>驾驶证照片</span>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="接单城市">{{
              data.region
            }}</el-descriptions-item>
            <el-descriptions-item label="加盟时间">
              {{ data.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="加入车队">{{
              data.fleetName ? data.fleetName : "无"
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 绑定车辆 -->
      <div class="carInfoBox">
        <div class="head">
          <i class="iconfontcolor icon-xinxi"></i>
          <h3>绑定车辆</h3>
        </div>
        <!-- 信息描述 -->
        <div class="formBox">
          <el-descriptions
            class="descriptions"
            :border="true"
            size="small"
            :labelStyle="{
              color: '#262626',
              fontSize: '12px',
              fontWeight: 'bold',
              backgroundColor: '#DDDDDD',
            }"
          >
            <el-descriptions-item labelClassName="label" label="车辆编号">{{
              data.vehicleId
            }}</el-descriptions-item>
            <el-descriptions-item label="车牌号">{{
              data.numberplate
            }}</el-descriptions-item>
            <el-descriptions-item label="车辆类型">{{
              data.vehicleType
            }}</el-descriptions-item>
            <el-descriptions-item label="品牌型号">{{
              data.brandModel
            }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{
              data.specification
            }}</el-descriptions-item>
            <el-descriptions-item label="加入时间">{{
              data.createTime
            }}</el-descriptions-item>
            <el-descriptions-item label="参数" :span="3"
              >{{
                data.vehicleArgs
              }}
              #4.2（包含）米长以上需提供道路运输许可证</el-descriptions-item
            >

            <el-descriptions-item label="图片资料" :span="3">
              <div class="picBox">
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.carFortyFive"
                    :preview-src-list="[data.carFortyFive]"
                  >
                  </el-image>
                  <span>车辆照片</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.drivingLicense"
                    :preview-src-list="[data.drivingLicense]"
                  >
                  </el-image>
                  <span>行驶证照片</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.roadTransport"
                    :preview-src-list="[data.roadTransport]"
                  >
                  </el-image>
                  <span>道路运输许可证</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="data.drivingLicenseCar"
                    :preview-src-list="[data.drivingLicenseCar]"
                  >
                  </el-image>
                  <span>车辆页</span>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 审批进度 -->
      <div class="Approval">
        <div class="head">
          <i class="iconfontcolor icon-jindu"></i>
          <h3>审批进度</h3>
        </div>
        <div class="steps">
          <el-steps
            direction="vertical"
            v-for="item in data.auditVoList"
            :key="item.auditId"
          >
            <!-- 1 -->
            <el-step>
              <!-- 自定义图标 -->
              <template slot="icon">
                <div class="CircleDian"></div>
              </template>
              <!-- 自定义标题 -->
              <template slot="title">
                <div class="title">
                  <span class="name">{{ item.driverName }}</span>
                  <span class="promoter">发起人</span>
                  <span class="dateTime">{{ item.createTime }}</span>
                </div>
              </template>
              <!-- 自定义内容 -->
              <template slot="description">
                <div class="content">
                  <div>
                    <strong style="color: #1890ff">发起认证</strong>
                  </div>
                </div>
              </template>
            </el-step>
            <!-- 2 -->
            <template v-if="item.auditVoList[0].certStatus != 1">
              <el-step>
                <template slot="icon">
                  <div class="CircleDian"></div>
                </template>
                <!-- 自定义标题 -->

                <template slot="title">
                  <div class="title">
                    <span class="name">{{
                      item.auditVoList[0].auditUser
                    }}</span>
                    <span class="promoter">审批人</span>
                    <span class="dateTime">{{
                      item.auditVoList[0].auditTime
                    }}</span>
                  </div>
                </template>
                <!-- 自定义内容 -->
                <template slot="description">
                  <div class="content">
                    <div>
                      <div
                        style="color: #67c23a"
                        v-show="item.auditVoList[0].certStatus == 2"
                      >
                        通过
                      </div>
                      <div
                        style="color: #f5222d"
                        v-show="item.auditVoList[0].certStatus == 3"
                      >
                        不通过
                      </div>
                      <span v-show="item.auditVoList[0].certStatus == '3'"
                        >认证说明:
                        {{ item.auditVoList[0].auditFailReason }}</span
                      >
                    </div>
                  </div>
                </template>
              </el-step>
            </template>

            <el-step
              v-if="item.auditVoList[0].certStatus == 1"
              style="margin-bottom: 15px"
            >
              <template slot="icon">
                <div class="CircleDian"></div>
              </template>
              <template slot="title">
                <div class="waitAudit">待审核...</div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import NoPassBox from "@/components/NoPassBox.vue";
import store from "@/store";
import httpApi from "@/http";

export default {
  data() {
    return {
      showMessageBox: false,
      driverId: "",
      data: {
        licenseLevel: {
          message: "",
          value: "",
        },
      },
    };
  },
  methods: {
    openMessageBox(passValue) {
      // true表示通过  false不通过
      this.showMessageBox = true;
      if (passValue) {
        //通过
        this.$confirm("是否通过该车辆认证, 是否继续?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = { driverId: this.driverId, status: "2" };
            // console.log('参数',params);
            httpApi.driverApi.ModifyDriverCertification(params).then((res) => {
              // console.log(res.data);
              if (res.data.code == 200) {
                // console.log('认证通过结果', res);
                this.$message({
                  type: "success",
                  message: "认证通过!",
                });
                this.$router.push("/driver/list"); //回到待认证车辆列表
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      } else if (!passValue) {
        //不通过
        const h = this.$createElement;

        this.$msgbox({
          title: "不通过",
          message: h("p", null, [h("NoPassBox", null, null)]),
          showCancelButton: true,
          showClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "NoPassMessageBox",
        })
          .then(() => {
            let params = {
              driverId: this.driverId,
              status: "3",
              cerInfo: store.state.illustrateValue,
            };
            // console.log('参数', params);

            httpApi.driverApi.ModifyDriverCertification(params).then((res) => {
              // console.log('认证不通过结果', res);
              if (res.data.code == 200) {
                this.getDetails();
                this.$message({
                  type: "error",
                  message: "认证不通过!",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      }
    },
    getDetails() {
      this.driverId = this.$route.params.driverId;
      // console.log(this.$route.params.driverId);
      let params = { driverId: this.driverId };
      // console.log('详情id传参',params);
      httpApi.driverApi.getWaitAuditDriverDetails2(params).then((res) => {
        // console.log('待认证详情结果', res.data.data);
        this.data = res.data.data;
        // console.log('状态', this.data.certStatus);
      });
    },
  },
  mounted() {
    this.getDetails();
  },
  components: {
    breadcrumb,
    NoPassBox,
  },
};
</script>

<style lang="scss" scoped>
.DetailsMain {
  height: calc(100% - 30px);
  min-width: 1012px;
  overflow-y: scroll;

  .header {
    height: 108px;
    width: 100%;

    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 14px;

    .stateBox {
      display: flex;
      align-items: center;

      .circle {
        background-color: #f3f7ff;
        width: 78.3px;
        height: 78.3px;
        border-radius: 50%;
        position: relative;
        margin-right: 16px;

        .iconState {
          font-size: 60px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      > .titleBox {
        > .title {
          color: #262626;
          font-size: 16px;
          margin-bottom: 11px;
          font-weight: bold;
          font-family: MicrosoftYaHei-Bold;
        }

        > .text {
          color: #939393;
          font-size: 12px;
        }
      }
    }

    .button_group {
      margin-left: auto;

      .notAdopt_btn {
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        height: 36px;
        width: 80px;
        color: #262626;
        font-size: 12px;
        background-color: #fff;
        margin-right: 14px;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          opacity: 0.8;
        }
      }

      .adopt_btn {
        transition: 0.2s;
        border-radius: 4px;
        height: 36px;
        width: 80px;
        font-size: 12px;
        background-color: #1890ff;
        color: #fff;
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  // 车辆信息
  .carInfoBox {
    height: 388px;
    background: #fff;
    margin-bottom: 19px;

    > .head {
      display: flex;
      height: 49px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      padding: 0 31px;

      > .icon-xinxi {
        font-size: 18px;
        margin-right: 6px;
      }

      > h3 {
        color: #262626;
        font-size: 14px;
      }
    }

    .formBox {
      padding: 32px 30px 26px;
      margin: 0 auto;

      .descriptions {
        .paramsLaber {
          width: 20%;

          .paramsCotent {
            width: 80%;
          }
        }

        .picBox {
          display: flex;

          .pic_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 32px;

            .pic {
              width: 109px;
              height: 71px;
            }

            > span {
              color: #666666;
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  // 审核进度
  .Approval {
    background-color: #fff;
    width: 100%;
    margin-bottom: 26px;

    > .head {
      display: flex;
      height: 49px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      padding: 0 31px;

      > .icon-jindu {
        font-size: 18px;
        margin-right: 6px;
      }

      > h3 {
        color: #262626;
        font-size: 14px;
      }
    }

    .steps {
      padding: 21px 32px;
      width: 100%;

      // 去组件默认样式
      ::v-deep .el-step__icon.is-text {
        border: none;
      }

      // 修改 连接线颜色
      ::v-deep .el-step.is-vertical .el-step__line {
        background-color: #1890ff;
        width: 2px;
      }

      .CircleDian {
        width: 10px;
        height: 10px;
        background: #1890ff;
        border-radius: 50%;
      }

      //发起人信息
      .title {
        font-size: 12px;
        align-items: center;
        display: flex;
        height: 24px;

        > .name {
          color: #262626;
          margin-right: 7px;
          font-weight: bold;
        }

        .promoter {
          color: #939393;
          margin-right: 7px;
        }

        > .dateTime {
          color: #939393;
        }
      }

      //审核内容
      .content {
        background-color: #fafafa;
        padding: 17px 18px 18px;
        width: 100%;
        font-size: 12px;
        margin: 0px 0 28px;
      }

      .waitAudit {
        font-size: 12px;
        font-weight: bold;
        color: #262626;
      }
    }
  }
}
</style>

<!-- 不带scope 才能修改弹窗的样式 -->

<style lang="scss">
.NoPassMessageBox {
  padding-bottom: 20px;

  .el-message-box__content {
    padding: 0 !important;
  }

  .el-message-box__title {
    font-size: 14px;
    color: #262626;
    font-weight: bold;
  }
}
</style>
